<!--公文流程结束后分发功能-->
<template>
  <view>
    <van-action-sheet v-model="showCompo" :close-on-click-overlay="false"  @closed="toClose" title="人员" :style="{ height: '80%' }" cancel-text="确定">
      <view class="topsearch">
        <van-field v-model="filterText" label="" placeholder="输入关键字进行过滤" :clearable="true" />
      </view>
      <view class="my-container">
        <view class="tree-left">
          <ly-tree :tree-data="treeData" :props="props" ref="drafter" node-key="deptId"
                   :default-expanded-keys="expandKeys" @node-click="handleNodeClick"
                   :filter-node-method="filterNode" :highlightCurrent="true" :currentNodeKey="currentNodeKey"/>
        </view>
        <view class="tree-right">
          <van-checkbox-group v-model="result">
            <view v-show="emptyData" class="text-center text-gray padding-top-sm">暂无数据</view>
            <van-cell-group>
              <van-cell v-for="(item, index) in userArr"  :key="index" title-style="margin-left:15rpx" :title="item.userName"
                        @click="toggle(index)">
                <template #right-icon>
                  <van-checkbox :name="item.userId+'_'+item.userName"  ref="checkboxes" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </view>
      </view>
    </van-action-sheet>
  </view>
</template>

<script>

export default {
  props: {
    showFenfa: {
      type: Boolean,
      default: false
    },
  },

  data() {
    return {
      showCompo: false,
      expandKeys: ["0","001"], //默认展开的节点-对应的deptId的值
      props: function() {
        return {
          // 这里的label就可以使用函数进行自定义的渲染了
          // label(data, node) {
          // 	return '节点' + node.data.personName;
          // },
          label: 'deptName', // 指把数据中的‘personName’当做label也就是节点名称
          children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
        }
      },
      filterText: '',
      treeData: [],
      deptName: [], //选中的单位信息
      deptCode: [], //选中的单位信息
      dept: '',
      deptId:'',
      result:[],//选中的人信息userName_userId
      userArr:[],//当前单位下的所有人员
      checkedUserId:[],//选中的人id
      checkedUserName:[],//选中人的姓名
      emptyData:true,//如果没有数据显示暂无数据
      //选中的人员信息
      userInfo:{
        userId:[],
        userName:[]
      },
      showNode:'',//要显示的机构节点
      hideNode:'',//要隐藏的机构节点
      page:1,
      rows:100,
      currentNodeKey:""
    };
  },

  watch: {
    showFenfa(val) {
      this.showCompo = val
    },
    filterText(val) {
      this.$refs.drafter.filter(val);
    },
  },

  mounted() {
    //获取要显示的组织机构代码
    this.getShowDept()
    // //获取当前用户所在的处室信息
    this.cuserchudept()
  },

  methods: {
     toggle(index) {
       // console.log("index: " + JSON.stringify(index));
     	this.$refs.checkboxes[index].toggle();
     },
    toClose(){
      //关闭的时候把选中的人的信息传回父组件
      //userInfo: {"userId":"4926","userName":"高萌"}
      if(this.result.length>0){
        this.result.forEach((item)=>{
          this.userInfo.userId.push(item.split('_')[0])
          this.userInfo.userName.push(item.split('_')[1])
        })
      }
      this.$emit('closeFenfaSheet',this.userInfo)
      this.userInfo.userId = []//清空
      this.userInfo.userName =[]//清空
    },

    // 选人
    handleNodeClick(obj) {
      // console.log(obj.data.deptName)//单位名称
      // console.log(obj.data.deptId)//单位id
      this.dept = obj.data.deptName
      this.deptId = obj.data.deptId
      this.getUserInfo()
      // console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
    },
    //呈报单位查询
    filterNode(value, data) {
      if (!value) return true;
      return data.deptName.indexOf(value) !== -1;
    },
    //获取要显示的组织机构代码
    getShowDept() {
      this.$http({
        url: this.$http.adornUrl(`/caac/oa/authority/gljfw/getShowDept/`+ this.cache.get('userInfo').deptId),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.cache.get('userInfo').systemKey,//固定值
          'systemFlag': this.cache.get('userInfo').systemFlag//固定值
        })
      }).then(({data}) => {
        if (data.code == 200) {
          if (data.data != null) {
            this.showNode = data.data.hideDepts
            this.hideNode = ''//要隐藏的节点
          }
          this.getOrgTree()
        }
      })
    },
    getOrgTree(){
      this.$http({
        url: this.$http.adornUrl(`/caac/platform/org/depts/orgDeptTree`),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.cache.get('userInfo').systemKey,//固定值
          'systemFlag': this.cache.get('userInfo').systemFlag,//固定值
          'showNode':this.showNode,
          'hideNode':'',//this.hideNode
        })
      }).then(({data}) => {
        // console.log("单位信息data: " + JSON.stringify(data.data));
        if(data.code==200){
          this.treeData = this.util.treeDataTranslate(data.data,'deptId','parentId')
          // console.log("orgTree: " + JSON.stringify(orgTree));

        }
      })
    },

    //获取呈报人列表
    getUserInfo(){
      this.userArr=[]//每次获取清空
      this.emptyData = false
      var _this = this
      this.$http({
        url: this.$httploading.adornUrl(`/caac/platform/org/users/getUserByDeptIdAndParams`),
        method: 'get',
        params: this.$http.adornParams({
          'deptId': this.deptId,//单位id
          'page': this.page,
          'rows': this.rows,
          'systemKey': this.cache.get('userInfo').systemKey, //固定值
          'systemFlag': this.cache.get('userInfo').systemFlag, //固定值
        })
      }).then(({data}) => {
        // console.log("data: " + JSON.stringify(data));
        if(data.code==200){
          let userId = this.cache.get('userInfo').userId
          if(data.data.total>0){
            this.userArr=data.data.rows.filter(t => t.userId != userId) // 去掉当前用户自己，因为不能自己给自己分发
          }else{
            this.emptyData = true
          }
        }
      })
    },
    //选中的用户
    selectUser(userId,userName){
      if(userId == this.checkedUserId){
        this.checkedUserId = ""//如果再次点击，则取消选中
        this.checkedUserName=""
      }else{
        this.checkedUserId = userId
        this.checkedUserName = userName
      }
    },
    //获取当前用户所在的处室信息
    cuserchudept(){
      this.$http({
        url: this.$http.adornUrl(`/caac/oa/comm/comm/cuserchudept`),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.cache.get('userInfo').systemKey,//固定值
          'systemFlag': this.cache.get('userInfo').systemFlag,//固定值
        })
      }).then(({data}) => {
        console.log("获取当前用户所在的处室信息: " + JSON.stringify(data.data));
        if(data.code==200){
          if(this.util.isNotEmpty(data.data)){
            this.expandKeys=[]
            data.data.allParentId.split(',').forEach((item)=>{
              this.expandKeys.push(item.toString())
            })
            this.deptId = data.data.deptCode
            this.currentNodeKey = this.deptId
            this.getUserInfo()
          }

          // console.log("orgTree: " + JSON.stringify(orgTree));

        }
      })
    },
  },

}
</script>

<style scoped>
	/deep/ .van-cell {
		padding: 20rpx 20rpx;
	}

	/deep/ .van-grid-item__content {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    -webkit-flex-direction: column;
	    flex-direction: column;
	    box-sizing: border-box;
	    height: 100%;
	    padding: 10px 8px;
	    background-color: #fff;
	}

  /deep/ .van-cell__title {
    min-width: 20% !important;
  }
    .topsearch{
      position: fixed;
      height: 90rpx;
      z-index: 99;
      width: 100%;
      border: 1rpx solid #f0f0f0;
    }
    .my-container{
      margin-top: 90rpx;
      display: flex;
      flex-direction: row;
    }
    .tree-left{
      margin-top: -20rpx;
      width: 65%;
      border-right: 1rpx solid #f0f0f0;
    }
    .tree-right{
      width: 35%;
      position: fixed;
      right: 0rpx;
      max-height: 750rpx;
      overflow: scroll;
    }
</style>
